<template>
    <div id="box">
        <div id="content">
            <el-button type="success" style="margin-top: 10px;" @click="go_to_table">返回主界面</el-button>
            <div class="head">
                <!-- v-model 绑定勾选状态  change() 绑定一个状态改变的事件，状态改变时就触发这个事件-->
                <input v-model ="isAll" @change ="handleChangeAll()" type="checkbox"> <span style="color: red; font-size: 25px;">全选/全不选</span>
            </div>
            <ul>
                <li v-for = "(items,index) in goods" :key = "items.id">
                    <div>
                        <!-- v-model 绑定勾选状态 change() 绑定一个状态改变的事件，状态改变时就触发这个事件-->
                        <!-- :value="items" 拿到勾选了的内容，方便接下来用勾选了的内容里面包含的价格和数量算总金额。 -->
                        <input type="checkbox" v-model = "checklist" :value="items" @change = "handleChange()">
                    </div>
                    <el-image ref="img" alt="图片未上传" :src="`http://localhost:8081/bookstore_servlet/image/upload/${goods[index].uid}.png`"  min-width="70" height="40" 
                    style="height: 50px;"/>
                    <!-- <img :src="items.pic" alt=""> -->
                    <div>
                        <div style="font-size: 25px;">{{items.name}}</div>
                        <div style="color: red; font-size: 25px;">${{items.price}}</div>
                    </div>
                    <div>
                        <!-- 当 items.number === 1时，disabled 为真，禁用这个按钮 -->
                        <el-button type="warning" @click = "items.number--" :disabled = "items.number === 1">-</el-button>
                        <span style="font-size: 25px;">{{items.number}}</span>
                        <el-button type="success" @click = "items.number++" :disabled = "items.number === items.limit">+</el-button>
                    </div>
                    <div>
                        <!-- 绑定一个事件，删除 goods列表 中的 第index 项 -->
                        <el-button type="warning" @click = "handleDeleteClick(index,items.id)">删除</el-button>
                    </div>
                </li>
            </ul>
            <footer>
                <el-tag type="success" style="width: 100px; height: 40px; font-size: 25px;">{{ sum }}</el-tag>
                <!-- {{checklist}} -->
                <el-button type="success" @click="go_to_pay">去付款</el-button>
                <el-alert
                    size="medium"
                    v-show="img_alert_isShow"
                    title="你已经付款完成，马上将返回主界面"
                    type="success"
                    center
                    show-icon>
                </el-alert>
            </footer>
        </div>
    </div>
</template>

<script>
export default {
    name:"shoppingCart",
    data(){
        return{
            isAll:false,
                checklist:[], // 拿到勾选了的商品
                img_alert_isShow:false,
                goods:[
                    
                ]
        }
    },
    computed:{
        sum(){
                    var total = 0
                    this.checklist.forEach(items => {
                        total += items.price * items.number    
                    });
                    return total
                },
        // good(){
        //     var re = [
        //             {
        //                 name:'JMSHOP 清纯校花 白色针织开衫慵懒风秋装女宽松仿貂毛毛衣外套',
        //                 price:40,
        //                 number:1,
        //                 id:1,
        //                 limit:99,
        //             }, 
        //         ]
        //     var good = this.$store.state.cart_information.goods
        // }
    },
    methods:{
                handleDeleteClick(index,id){
                    // 删除 goods 列表中的 第 index 项
                    this.goods.splice(index,1)
                    // 当  checklist 中的 某一个 items 的 id = 删除的 goods 列表第 index 项的 id 时，
                    // 把checklist 这一项过滤掉，然后重新生成 checklist 
                    this.checklist = this.checklist.filter(items => items.id !==id)
                    // 每点击删除事件时，触发 handleChange() 事件
                    this.handleChange()
                },
                handleChangeAll(){
                    if(this.isAll){
                        this.checklist = this.goods
                    }else{
                        this.checklist = []
                    }
                },
                handleChange(){
                    if(this.checklist.length === this.goods.length){
                        this.isAll = true
                    }else{this.isAll = false}
                },
                go_to_table(){
                    this.$router.push('/table')
                },
                go_to_pay(){
                    this.img_alert_isShow = true
                    setTimeout(() => { this.img_alert_isShow = false;this.$router.push('/table') }, 3000);
                }
    },
    mounted(){
        this.goods = this.$store.state.cart_information.goods
    }  
}
</script>

<style scoped>
    /* *{margin: 0;padding: 0;} */
        #box{
            background-image: url(../assets/background/preview1.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 98%;
            height: 1800px;
        }
        #content{
            width: 100%;height: 100%;
        }
        .head{
            height: 60px;
            margin: 30px 30px;
        }
        ul li{
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 30px;
        }
        li img{width: 80px;height: 120px;}
        footer >p{
            margin-left: 30px;
            float: left;
        }
        footer >div{
            margin-right: 30px;
            float:right;
        }
        input{
            position: inherit;
            opacity: 1;
            height: 20px;
            width: 20px;
        }
</style>